<template>
	<view class="outer_box">
		<scroll-view scroll-y="true" :style="{height:height+'px'}">
			<view class="refund-box">
				<view class="refund-title">
					<!-- 标题 -->
					<view class="" v-if='refundInfo.refundStatus==-1'>请等待商家处理</view>
					<view class="" v-if='refundInfo.refundStatus==1'>商家已同意退货退款</view>
					<!-- <view class="" v-if='refundInfo.refundStatus==1'>商家已同意退货退款申请，等待寄回商品</view> -->
					<!-- <view class="" v-if='status==3'>商品已退回，等待商家退款</view> -->
					<!-- <view class="" v-if='status==4'>退货退款成功</view> -->
					<view class="" v-if='refundInfo.refundStatus==2'>退款失败</view>
					<!-- 描述 -->
					<view class="" v-if='refundInfo.refundStatus==-1' >还剩2天23时59分51秒</view>
					<!-- <view class="" v-if='status==3'>圆通快递 6578145955908</view> -->
					<!-- <view class="" v-if='status==4'>2021.02.07 13:29</view> -->
					<!-- <view class="" v-if='status==5'>退款被拒绝，建议修改申请</view> -->
				</view>

			</view>
			<view class="refund-box">
				<view class="refund-describe" v-if='refundInfo.refundStatus==-1'>
					<view class="">您已成功发起退货退款申请，请耐心等待商家处理</view>
					<view class="">商家同意，请按照给出的退货地址退货，并填写退货运单号。
						如果商家拒绝，您可以再次提交退款申请，商家会重新处理。
						如果商家超时未处理，退货申请达成，请按照系统给出的退货地址退货。</view>
				</view>
				<!-- <view class="refund-describe" v-if='refundInfo.refundStatus==1'>
					<view class="">商家已同意退货退款申请，请尽早发货</view>
					<view class="">
						商家收货地址： 收货人：{{refundInfo.receiver}} 地址：{{refundInfo.deliveryAddress}}
					</view>
					<view class="">
						退货说明： 未与商家协商一致，请勿使用到付或者平邮，以免商家拒签货物 交易的钱款在平台中间账户，确保您资金安全 请填写真实物流
					</view>
				</view> -->
				<view class="refund-describe" v-if='refundInfo.refundStatus==1'>
					<!-- <view class="">商品已退回，退款处理中</view> -->
					<view class="">
						商家收货地址： 收货人：{{refundInfo.receiver}} 地址：{{refundInfo.deliveryAddress}}
					</view>

				</view>
				
				<view class="refund-price" v-if='refundInfo.refundStatus==1'>
					<view class="">
						<text>退款总金额：</text>
						<text id='price'>￥90.00</text>
					</view>
					<view class="">
						退回账户：会员余额
					</view>
				
				</view>
				
				<view class="refund-describe" v-if='refundInfo.refundStatus==2'>
					<view class="">失败原因</view>
					<view class="">
						您好，由于您申请退款是在发货之后，这边已经发出去了，货物正在运送中，现在联系物流已经来不及了，希望您能理解，等您收到货不满意的
					</view>
				
				</view>

			</view>
			<view class="refund-box" v-if='refundInfo.refundStatus==1&&refundInfo.isWayBill==false'>
				<view class="odd" @tap="openLogisticsOdd">填写物流单号</view>
			</view>
			<view class="refund-box">
				<view class="refund-product-title">
					<view class="">退款信息</view>
				</view>
				<view class="refund-product">
					<!-- 乐活商品 -->
					<!-- <productInfo class="product-info" v-for="(item,index) in 5" :productInfo='productInfo'>
						<view slot='sku' class="sku">1000g</view>
						<view slot='price'>x1</view>
						<text slot='number-btn' class="number">合计：￥30.00</text>
					</productInfo> -->
					<!-- 服务类商品 -->
					<productInfo class="product-info" v-for="(item,index) in refundInfo.refundGoods" :productInfo='item'>
						<view slot='sku' class="sku"></view>
						<view slot='price'>x{{item.number}}</view>
						<text slot='number-btn' class="number">合计：￥{{item.price}}</text>
					</productInfo>
					<view class="line"></view>
					<view class="apply-key">
						<view class="">退款原因：</view>
						<view class="">{{refundInfo.refundRemark}}</view>
						<view class=""></view>
					</view>
					<view class="apply-key" v-if='status !=4'>
						<view class="">退款金额：</view>
						<view class="price">￥{{(price/100).toFixed(2)}}</view>
						<view class=""></view>
					</view>
					<view class="apply-key">
						<view class="">申请时间：</view>
						<view class="">{{refundInfo.createTime}}</view>
						<view class=""></view>
					</view>
					<view class="apply-key">
						<view class="">退款编号：</view>
						<view class="">{{refundInfo.orderNumber}}</view>
						<view class="copy-btn-box">
							<view class="copy-btn" @tap='copy(refundInfo.orderNumber)'>复制</view>

						</view>
					</view>
					<view class="apply-key">
						<view class="">退款说明：</view>
						<view class="">{{refundInfo.typeName}}</view>
						<view class=""></view>
					</view>
				</view>


			</view>

		</scroll-view>




		<view class="operation-box" v-if='refundInfo.refundStatus==-1' @tap="updateOrderState(refundInfo)">

			<view class="operation">
				<view class="">取消订单</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				oddnumber:0,
				price:0,
				refundInfo:'',
				height: 500,
				productInfo: {
					title: '进口苹果',
					image: '/static/login/logo.png',
					sku: '1000g',
					price: '30'
				},
				productInfo2:{
					title:'零瑕疵显微镜口腔洁牙护理套餐',
					image:'/static/login/logo.png',
					price:'1990'
				},
				
				status: 2, //1等待商家处理  2同意退货 3商品已退回 4 退款成功 5失败

			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					// if (this.status == 1) {
					// 	this.height = res.windowHeight - uni.upx2px(120)
					// } else {
						this.height = res.windowHeight - uni.upx2px(0)
					// }


				}
			})
		},
		onLoad(option) {
			this.changeTap(option.orderNumber)
		},
		onShow() {
			uni.$on('odd',(data)=>{
				console.log('111111111111111='+data)
				this.oddnumber = data
				console.log('111111111111111='+this.oddnumber)
			})
		},
		methods: {
			//取消订单
			updateOrderState(state) { 
				let takesState = ''
				let userOrderStatus = ''
				let arr = []
				// if (state == 2) {
				// 	takesState = 3
				// }
				arr.push(state.orderNumber)
				this.$api.updateOrderState({
					orderNo: arr,
					orderStatus: 4,
					// takesState: takesState
				}).then((res) => {
					if (res.data.success) {
						uni.showToast({
							title: "成功",
							duration: 1000,
						});
						// this.$emit('carData',9)
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1100);
			
					} else {
						uni.showToast({
							title: "订单取消失败",
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			changeTap(orderNumber) {
				this.$api.refundInfo({
					orderNumber:orderNumber
				}).then((res) => {
					this.refundInfo = res.data.dataMap
					console.log(res.data.dataMap)
					for(var i = 0;i<this.refundInfo.refundGoods.length;i++){
						this.price = Number(this.price) + parseFloat(this.refundInfo.refundGoods[i].price) * parseInt(this.refundInfo.refundGoods[i].number)* 100
					}
				})
			console.log(this.price)
			},
			openLogisticsOdd(){
				uni.navigateTo({
					url:'../logistics/logisticsOdd?orderNumber='+this.refundInfo.orderNumber
				})
			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			}

		}
	}
</script>

<style lang="less" scoped>
	/deep/ .product-box-module{
		margin-top: 20rpx;
	}
	page {
		background-color: #f8f8f8;
	}

	.outer_box {
		display: flex;
		flex-direction: column;
		background-color: #F8f8f8;
		.operation-box {
			position: fixed;
			bottom: 0;
			display: flex;
			margin: 4rpx 0;
			height: 110rpx;
			width: 100%;
			box-shadow: 0px -1px 0px 0px #EEEEEE;
			border-bottom: 2rpx solid #EEEEEE;
			justify-content: flex-end;
			background-color: #fff;

			.operation {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				view {
					margin-left: 30rpx;
					color: #fff;
					height: 80rpx;
					width: 220rpx;
					border-radius: 50rpx;
					line-height: 80rpx;
					text-align: center;
					background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
				}
			}

		}

		.refund-box {
			background-color: #fff;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;

			.odd {
				text-align: center;
				font-size: 28rpx;
				color: #FF8308;
				padding: 10rpx 0;
			}

			.refund-product {
				.apply-key {
					display: flex;
					font-size: 28rpx;
					color: #333333;
					margin-top: 10rpx;
					view:nth-child(1) {
						flex: 1;
					}

					view:nth-child(2) {
						flex: 3;
					}

					view:nth-child(3) {
						flex: 1;

					}

					.copy-btn-box {
						justify-content: flex-end;

						.copy-btn {
							margin-left: 40rpx;
							width: 90rpx;
							height: 40rpx;
							background: #FFFFFF;
							border: 2rpx solid #999999;
							border-radius: 24rpx;
							font-weight: 400;
							color: #666666;
							font-size: 24rpx;
							text-align: center;
							line-height: 40rpx;
						}
					}

					.price {
						color: #FF8308;
					}
				}

				.line {
					width: 100%;
					height: 2rpx;
					background-color: #f8f8f8;
					margin: 20rpx 0;
				}

				.product-info {
					margin-top: 20rpx;

					.sku {
						color: #999999;
						font-size: 24rpx;
					}

					.price {
						font-size: 24rpx;
						font-weight: bold;
						color: #333333;
					}

					.number {
						width: 100%;
						text-align: end;
						color: #333333;
						font-size: 28rpx;
						font-weight: 400;
					}
				}

			}

			.refund-product-title {
				view {
					border-bottom: 2rpx solid #f8f8f8;
					padding-bottom: 20rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}

			}
			.refund-price{
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				#price{
					color: #FF8308;
				}
			}

			.refund-describe {
				view:nth-child(1) {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;

				}

				view:nth-child(2),
				view:nth-child(3) {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;

				}
			}

			.refund-title {
				view:nth-child(1) {
					font-size: 36rpx;
					font-weight: bold;
					color: #FF8308;
				}

				view:nth-child(2) {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					margin-top: 10rpx;
				}

			}

		}
	}
</style>
